<template>
    <div class="redp">
        <div class="redpt">
            <p>饮品抵用金</p>
            <p>有效期至2021-06-04</p>
            <span>4.8折</span>
        </div>
        <div class="redpb">
            <span>使用规则</span>
            <button>立即使用</button>
        </div>
    </div>
</template>

<script>
export default {

}
</script>

<style>
.redp{
   background-color: #ededd1;

    position: relative;
    width: 3.58rem;
    height: 1.28rem;
    /* background-color: red; */
    margin: auto;
    margin-top: 0.13rem;
}
.redpt{
    height: 0.88rem;
    border-bottom: 1px dotted gray;
    border-radius: 12px;
}
.redpt p:nth-child(1){
    /* background-color: aqua; */
    padding-top: 0.22rem;
    margin-left: 0.2rem;
    font-size: 0.15rem;
    font-weight: 600;
}
.redpt p:nth-child(2){
    font-size: 0.1rem;
    margin-top: 1.2em;
    margin-left: 0.2rem;
    /* background-color: blueviolet; */

}
.redpt span:nth-child(3){
    position: absolute;
    color: #6d86c9;
    top: 0.3rem;
    right: 0.2rem;
    font-size: 0.2rem;
}
.redpb{
    height: 0.4rem;
    line-height: 0.4rem;
    border-radius: 12px;
}
.redpb span{
    font-size: 0.1rem;
    margin-left: 0.2rem;

}
.redpb button{
    position: absolute;
    width: 0.73rem;
    height: 0.26rem;
    background-color: #6d86c9;
    color: white;
    line-height: 0.26rem;
    text-align: center;
    border: 0px;
    border-radius: 0.2rem;
    right: 0.2rem;
    top: 0.95rem;
}

</style>